<template>
  <view class="controlCheck-container">
    <TopBar
      class="tab-bar"
      :tabBars="tabBars"
      :tabIndex="tabIndex"
      @change="onTabChange"
      backgroundColor="#fff"
    ></TopBar>
    <component ref="comp" v-bind:is="currentTabComponent" :data="listData"></component>
    <!--<view v-else>-->
    <!--  <Empty />-->
    <!--</view>-->
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import TopBar from '@/components/top-bar/index.vue'
import My from './components/my.vue'
import All from './components/all.vue'

export default {
  components: {
    Empty,
    TopBar,
    My,
    All
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex).componentName
    }
  },

  data() {
    return {
      textColor: true,
      listData: [],
      pageNum: 1,
      total: null,

      tabBars: [
        {
          name: '我的班表',
          componentName: 'My',
          index: 0
        },
        {
          name: '全部班表',
          componentName: 'All',
          index: 1
        }
      ],
      tabIndex: 0,
      taskSearchParams: undefined,
      recordSearchParams: undefined
    }
  },
  onShow() {
    // this.initData();
  },
  onReachBottom() {
    this.pageNum++
    // this.getList();
  },
  onTabItemTap(e) {
    // this.initData();
  },
  mounted() {
    // console.log('comp', this.$refs.comp)
  },
  methods: {
    onTabChange(obj) {
      if (this.tabIndex === obj.index) {
        return
      }
      this.tabIndex = obj.index
      this.listData = []
      // this.$refs.comp.getItem()
    },
    styleSelector(option) {
      return 'level_' + option
    },
    initData() {
      this.pageNum = 1
      this.total = null
      // this.getList();
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  ::v-deep .top-bar-item {
    font-size: 16px;
    color: #999999;
    font-weight: normal;
  }
  ::v-deep .top-bar-item.active {
    font-weight: bold;
    color: #454a5e;
  }
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
